﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="BankSysDemo.WebUI.Login" %>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <!-- Bootstrap 5 CSS -->
    <link href="../Content/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(45deg, #2c3e50, #3498db);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: gradient 15s ease infinite;
        }

        .login-box {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            padding: 40px;
            transform: translateY(0);
            transition: all 0.3s ease;
            width: 100%;
            max-width: 500px;
        }

            .login-box:hover {
                transform: translateY(-5px);
                box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
            }

        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }

            .login-header h2 {
                color: #2c3e50;
                font-weight: 700;
                position: relative;
                padding-bottom: 10px;
            }

                .login-header h2::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 60px;
                    height: 3px;
                    background: #3498db;
                }

        .form-control {
            border: none;
            border-bottom: 2px solid #ddd;
            border-radius: 0;
            padding: 15px 5px;
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }

            .form-control:focus {
                box-shadow: none;
                border-bottom-color: #3498db;
            }

        .input-group-text {
            background: transparent;
            border: none;
            border-bottom: 2px solid #ddd;
            border-radius: 0;
        }

        .btn-login {
            background: linear-gradient(45deg, #3498db, #2c3e50);
            border: none;
            color: white;
            padding: 12px 40px;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
            margin-top: 20px;
        }

            .btn-login:hover {
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
            }

        .links {
            text-align: center;
            margin-top: 30px;
        }

            .links a {
                color: #666;
                text-decoration: none;
                transition: color 0.3s ease;
            }

                .links a:hover {
                    color: #3498db;
                }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }
    </style>
</head>
<body>
    <div class="login-box">
        <div class="login-header">
            <h2>欢迎登录</h2>
        </div>
        <form runat="server">
            <div class="input-group mb-3">
                <span class="input-group-text"><i class="fas fa-user"></i></span>
                <asp:TextBox ID="TextBox1" runat="server" CssClass="form-control" placeholder="用户名"></asp:TextBox>
                <%--<input type="text" class="form-control" placeholder="用户名" required>--%>
            </div>

            <div class="input-group mb-3">
                <span class="input-group-text"><i class="fas fa-lock"></i></span>
                <asp:TextBox ID="TextBox2" runat="server" CssClass="form-control" placeholder="密码" TextMode="Password"></asp:TextBox>
                <%--<input type="password" class="form-control" placeholder="密码" required>--%>
            </div>

            <div class="input-group mb-3">
                <span class="input-group-text"><i class="fas fa-id-badge"></i></span>
                <asp:TextBox ID="TextBox3" style="width:160px;height:40px;border:0 0 1px 0 solid blue;box-shadow:none;" runat="server" placeholder="验证码"></asp:TextBox>
                <img alt="" onclick="this.src=this.src+'?c='+Math.random();" src="../Handler1.ashx" style="width:160px;height:40px;margin-left:20px;" />
                <%--<input type="text" class="form-control" placeholder="用户名" required>--%>
            </div>

            <asp:Button ID="Button1" runat="server" Text="登 录" CssClass="btn btn-login" OnClick="Button1_Click" />
            <%--<button type="submit" class="btn btn-login">登 录</button>--%>

            <div class="links mt-4">
                <a href="#!" class="me-3">忘记密码？</a>
                <a href="#!">注册新账号</a>
            </div>
        </form>
    </div>

    <!-- Bootstrap JS 及其依赖 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
</body>
</html>
